<template>
  <KView class="address-picker">
    <KView class="address-picker-title">
      <span>{{placeholder}}</span>
      <KView class="address-picker-close" @click="toClose">
        <sys-svg name="close" color="#c8c8c8"></sys-svg>
      </KView>
    </KView>
    <template v-if="addressList!==null">
      <KView class="address-picker-data">
        <KView class="address-picker-data-icon">
          <KView v-for="(address,index) in addressList" :key="address.type" :class="{'first-item':index===0}">
            <KView v-if="index>0" class="address-picker-data-line">
              <KView></KView>
            </KView>
            <KView class="address-picker-data-circle"></KView>
          </KView>
          <KView v-if="emptyType!==''" :class="{'first-item':emptyType==='province'}">
            <KView v-if="emptyType!=='province'" class="address-picker-data-line">
              <KView></KView>
            </KView>
            <KView class="address-picker-data-circle empty-circle"></KView>
          </KView>
        </KView>
        <KView class="address-picker-data-text">
          <KView v-for="address in addressList" :key="address.type" class="address-picker-data-name" :class="{'select':address.type===mode}"
            @click="typeChange(address.type)">
            {{address.name}}
          </KView>
          <KView v-if="emptyType!==''" class="address-picker-data-name" :class="{'select':emptyType===mode}" @click="typeChange(emptyType)">
            {{placeholderData[emptyType]}}
          </KView>
        </KView>
      </KView>
      <KView class="address-picker-line"></KView>

      <KView class="address-picker-content" :key="mode">
        <KView class="address-picker-content-title">{{placeholderData[mode]}}</KView>
        <KView class="address-picker-content-option">
          <KView v-for="item in addressOptions" :key="item.code" class="clearfix" @click="itemClick(item)">
            <KView class="address-picker-content-option-text">{{item.name}}</KView>
            <KView class="address-picker-content-option-icon" v-if="mode!=='street'">
              <sys-svg name="arrowRight" color="#cbcbcb"></sys-svg>
            </KView>
          </KView>
        </KView>
      </KView>
    </template>
  </KView>
</template>

<script>
  import SystemUtil from 'utils/systemUtil';

  import SysSvg from 'common/sysSvg';

  import AddressApi from 'services/addressApi';

  import storeMixins from 'mixins/storeMixins';

  export default {
    mixins:[storeMixins],

    props: {
      value: {
        type: Object,
        required: true
      },
      placeholder: {
        type: String,
        default: '请选择'
      }
    },

    computed: {
      emptyType() {
        let addressList = this.addressList;
        let len = addressList.length;
        if (len === 4) {
          return '';
        }

        let fields = this.fields;
        return fields[len];
      }
    },

    data() {
      return {
        addressList: null,
        fields: ['province', 'city', 'area', 'street'],
        mode: 'province',
        placeholderData: {
          province: '请选择省',
          city: '请选择市',
          area: '请选择区/县',
          street: '请选择乡/镇/街道'
        },
        addressOptions: []
      };
    },

    created() {
      SystemUtil.showLoading();
      this.setAddressOptions(this.mode).then(() => {
        this.addressList = this.getAddressList();
        SystemUtil.hideLoading();
      }).catch(() => {
        SystemUtil.hideLoading();
      });
    },

    methods: {
      setAddressOptions(mode, code) {
        return AddressApi.getGoodsAddressList(mode, code).then(options => {
          this.addressOptions = options;
          return options;
        });
      },

      getAddressList() {
        let fields = this.fields;
        let data = this.value;
        let addressList = [];
        for (let i = 0; i < fields.length; i++) {
          const field = fields[i];
          let obj = data[field];
          if (obj === undefined) {
            break;
          }
          addressList.push({
            type: field,
            code: obj.code,
            name: obj.name
          });
        }
        return addressList;
      },

      itemClick(item) {
        let mode = this.mode;
        let fields = this.fields;
        let index = fields.indexOf(mode);
        if (index >= 3) {
          this.addAddressCode(item, mode, index);
          this.toChange();
          return;
        }
        let nexMode = fields[index + 1];
        SystemUtil.showLoading();
        this.setAddressOptions(nexMode, item.code).then(() => {
          this.addAddressCode(item, mode, index);
          this.mode = nexMode;
          SystemUtil.hideLoading();
        }).catch(() => {
          SystemUtil.hideLoading();
        });
      },

      typeChange(type) {
        let fields = this.fields;
        let index = fields.indexOf(type);
        let code = undefined;
        if (index > 0) {
          let addressList = this.addressList;
          let obj = addressList[index - 1];
          code = obj.code;
        }

        SystemUtil.showLoading();
        this.setAddressOptions(type, code).then(() => {
          this.mode = type;
          SystemUtil.hideLoading();
        }).catch(() => {
          SystemUtil.hideLoading();
        });
      },

      addAddressCode(item, mode, index) {
        let obj = {
          type: mode,
          code: item.code,
          name: item.name
        };
        let addressList = this.addressList;
        let len = addressList.length;
        if (index >= len) {
          addressList.push(obj);
        } else {
          addressList.splice(index, len, obj);
        }
      },

      toChange() {
        let addressList = this.addressList;
        let data = {};
        for (let i = 0; i < addressList.length; i++) {
          const address = addressList[i];
          data[address.type] = {
            code:address.code,
            name:address.name
          };
        }

        this.$emit('input',data);
        this.$emit('change',data);
      },

      toClose() {
        this.$emit('close-click');
      }
    },

    components: {
      SysSvg
    }
  };

</script>

<style lang="scss">
  .address-picker {
    height: calc(100% - #{formatPx(30)});
    background: #ffffff;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    font-size: formatPx(28);
    padding-top: formatPx(20);
    padding-bottom: formatPx(10);
    display: flex;
    flex-direction: column;
    overflow: auto;

    .address-picker-title {
      height: formatPx(35);
      line-height: formatPx(35);
      text-align: center;
      position: relative;

      .address-picker-close {
        position: absolute;
        top: 0;
        right: formatPx(30);
        width: formatPx(35);
        height: 100%;
      }
    }

    .address-picker-data {
      padding: 0 formatPx(30);
      display: flex;
      margin: formatPx(40) 0;

      .address-picker-data-icon {
        width: formatPx(15);
        margin-right: formatPx(45);
        padding-top: formatPx(16);

        >div {
          position: relative;
          height: formatPx(74);

          &.first-item {
            height: formatPx(15);
          }

          .address-picker-data-line {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;

            >div {
              width: 1px;
              height: calc(100% - #{formatPx(8)});
              background: #59c264;
            }
          }

          .address-picker-data-circle {
            position: absolute;
            width: calc(#{formatPx(15)} - 2px);
            height: calc(#{formatPx(15)} - 2px);
            border: 1px solid #59c264;
            background: #59c264;
            left: 0;
            bottom: 0;
            border-radius: formatPx(8);

            &.empty-circle {
              background: #ffffff;
            }
          }
        }
      }

      .address-picker-data-text {
        flex: 1;

        .address-picker-data-name {
          height: formatPx(44);
          line-height: formatPx(44);
          margin-bottom: formatPx(30);

          &:last-child {
            margin-bottom: 0;
          }

          &.select {
            color: #59c264;
          }
        }
      }
    }

    .address-picker-line {
      height: 2px;
      background: #e9e9e9;
    }

    .address-picker-content {
      flex: 1;
      padding-top: formatPx(20);
      display: flex;
      flex-direction: column;
      overflow: auto;
      min-height: 0;

      .address-picker-content-title {
        color: #909090;
        margin-bottom: formatPx(20);
        padding: 0 formatPx(30);
      }

      .address-picker-content-option {
        flex: 1;
        border-top: 1px solid #f0f0f0;
        overflow: auto;
        min-height: 0;

        >div {
          padding: 0 formatPx(30);
          border-bottom: 1px solid #f0f0f0;
          height: formatPx(60);

          .address-picker-content-option-text {
            float: left;
            line-height: formatPx(60);
            height: 100%;
          }

          .address-picker-content-option-icon {
            float: right;
            width: formatPx(30);
            height: 100%;
          }
        }
      }
    }
  }

</style>
